@section('style')
<style></style>
@show
<div id="@yield('vue-dom','vue-render')">
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
        <naive-provider>
            @yield('content')
        </naive-provider>
    </n-config-provider>
</div>
<script>
    Dcat.ready(()=>{
        window.onload = ()=>{
            const { defineComponent, h } = Vue
            const { useLoadingBar, useDialog, useMessage, useNotification } = naive;
            // 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
            const NaiveProvider = defineComponent({
                setup(props,{ slots }){
                    function registerNaiveTools() {
                        window.$loadingBar = useLoadingBar();
                        window.$dialog = useDialog();
                        window.$message = useMessage();
                        window.$notification = useNotification();
                    }
                    const NaiveProviderContent = defineComponent({
                        setup() {
                            registerNaiveTools();
                        },
                        render() {
                            return h('div');
                        }
                    });
                    return ()=> h('div',{ class:'NaiveProvider' },
                        h(naive.NLoadingBarProvider,
                            h(naive.NDialogProvider,
                                h(naive.NNotificationProvider,
                                    h(naive.NMessageProvider,()=>[
                                        slots.default(),
                                        h(NaiveProviderContent)
                                    ])
                                )
                            )
                        )
                    )
                }
            })

            if(!window.vueRender){
                window.vueRender = (vueScript = {})=>{
                    const app = Vue.createApp(vueScript)
                    app.mixin({
                        data(){
                            return {
                                zhCN: naive.zhCN,
                                dateZhCN: naive.dateZhCN,
                            }
                        }
                    })
                    app.use(naive)
                    app.component("naive-provider",NaiveProvider)
                    app.mount("#@yield('vue-dom','vue-render')")
                }
            }
        }
    })
</script>
@section('vueScript')
    <script></script>
@show

